<template>
    <div>
        <!-- apple专区 -->
        <div class="exclusive b" v-if="iPhoneAll">
            <img class="left" v-lazy="getHomeImageUrl(iPhoneAll.params[0].img)"
                @click="toGoods(iPhoneAll.params[0].url)">
            <img class="right l" v-lazy="getHomeImageUrl(iPhoneAll.params[1].img)"
                @click="toGoods(iPhoneAll.params[1].url, 'iPhone')">
        </div>
        <!-- iPhone14全家福 -->
        <div class="ip14 b">
            <img class="left" v-for="(item, index) in iPhoneAll?.params" :class="{ active: index < 2 }"
                v-lazy="getHomeImageUrl(item.img)" @click="toGoods(item.url)">
        </div>
        <!-- 轮播图 -->
        <van-swipe class="my-swipe-2 b" :autoplay="3000" indicator-color="#168ce6">
            <van-swipe-item v-for="(item, index) in swipeData?.params" :key="index" @click="toGoods(item.url)">
                <img class="image" v-lazy="getHomeImageUrl(item.img)">
            </van-swipe-item>
        </van-swipe>
        <!-- 热销专区 -->
        <div class="item-b hot b" v-if="model1">
            <img class="left" v-lazy="getHomeImageUrl(model1.params[0].img)" @click="toGoods(model1.params[0].url)">
            <div class="right">
                <div class="top b">
                    <img class="airpods" v-lazy="getHomeImageUrl(model1.params[1].img)"
                        @click="toGoods(model1.params[1].url)">
                    <img class="air-hot l" v-lazy="getHomeImageUrl(model1.params[2].img)"
                        @click="toGoods(model1.params[2].url, 'iPhone')">
                </div>
                <img class="mac-book" v-lazy="getHomeImageUrl(model1.params[3].img)"
                    @click="toGoods(model1.params[3].url)">
            </div>
        </div>
        <!-- 电脑专区 -->
        <div class="item-b computer b" v-if="model2">
            <img class="left" v-lazy="getHomeImageUrl(model2.params[1].img)" @click="toGoods(model2.params[1].url)">
            <div class="right thor">
                <div class="top">
                    <img class="airpods l" v-lazy="getHomeImageUrl(model2.params[3].img)"
                        @click="toGoods(model2.params[3].url)">
                    <img class="air-hot" v-lazy="getHomeImageUrl(model2.params[2].img)">
                </div>
                <img class="mac-book b" v-lazy="getHomeImageUrl(model2.params[0].img)"
                    @click="toGoods(model2.params[0].url)">
            </div>
        </div>
        <!-- 特卖活动 -->
        <div class="especially b" v-if="model3">
            <img class="left" v-lazy="getHomeImageUrl(model3.params[0].img)" @click="toGoods(model3.params[0].url)">
            <div class="right">
                <img class="first-month b" v-lazy="getHomeImageUrl(model3.params[1].img)"
                    @click="toGoods(model3.params[1].url)">
                <div class="bottom">
                    <img class="yoga27" v-lazy="getHomeImageUrl(model3.params[2].img)"
                        @click="toGoods(model3.params[2].url)">
                    <img class="activity" v-lazy="getHomeImageUrl(model3.params[3].img)">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { Swipe, SwipeItem } from 'vant';
export default {
    name: "CommodityZone",
    props: {
        iPhoneAll: Object,
        swipeData: Object,
        model1: Object,
        model2: Object,
        model3: Object,
    },
    data() {
        return {
            iPhones: [],
        }
    },
    components: {
        [Swipe.name]: Swipe,
        [SwipeItem.name]: SwipeItem,
    },
    methods: {
        toGoods(url, name) {
            const id = url.split("?")[1].split("=")[1];
            if (name) {
                this.$router.push({ name: "list", query: { cate_id: id, name } })
            } else {
                this.$router.push({ name: "goods", query: { goods_id: id } })
            }
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep .van-swipe__indicator {
    height: 4px;
    border-radius: 0;
}

::v-deep .van-swipe__indicator--active {
    width: 10px;
}


.exclusive {
    display: flex;
    height: 105px;

    img {
        height: 105px;
    }

    .left {
        width: 260px;
        flex-shrink: 0;
    }

    .right {
        width: 95px;
        flex-shrink: 0;
    }
}

.ip14 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    img {
        width: 85px;

        &.active {
            display: none;
        }
    }
}

.my-swipe-2 {
    img {
        width: 100%;
    }
}

.item-b {
    display: flex;
    height: 250px;
}

.hot {
    justify-content: space-between;

    .left {
        width: 180px;
        object-fit: contain;
    }

    .right {
        width: 180px;
        display: flex;
        flex-direction: column;

        .top {
            display: flex;

            img {
                width: 85px;
            }
        }

        .mac-book {
            width: 100%;
        }
    }
}

.computer {
    justify-content: space-between;
    flex-direction: row-reverse;

    .left {
        width: 180px;
        object-fit: contain;
    }

    .right {
        width: 180px;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-between;

        .top {
            display: flex;
            flex-direction: row-reverse;

            img {
                width: 85px;
            }
        }

        .mac-book {
            width: 100%;
        }
    }
}

.especially {
    display: flex;
    justify-content: space-evenly;
    height: 195px;

    .left {
        width: 115px;
        object-fit: contain;
    }

    .right {
        width: 230px;

        .bottom {
            display: flex;
            justify-content: space-between;

            img {
                width: 105px;
            }
        }

        .first-month {
            width: 100%;
        }
    }
}
</style>